<template>
  <view class="content-box">
    <u-navbar
      :title="$t('setting.BlockUser')"
      :autoBack="true"
      bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;"
      :placeholder="true"
    >
      <view
        class="u-nav-slot slot-right"
        slot="right"
        v-if="list.length > 0"
        @click="editUser"
        >{{ editShow ? $t('index.Done') : $t('index.Edit') }}</view
      ></u-navbar
    >
    <view class="content">
      <view class="block-user-wrap" @click="toPage()">
        <view class="iconfont icon-heimingdan"></view>
        <view class="block-user">{{$t('setting.Block')}}</view>
      </view>
      <Blacklist
        :list="list"
        :editShow="editShow"
        @rescind="rescindUser"
        :options="options"
        @touchmove="touchmove"
        @touchstart="touchstart"
        @touchend="touchend"
      ></Blacklist>
      <view class="empty-wrap" v-if="list.length == 0">
        <image
          src="/static/image/user/user-disabled.png"
          class="disabled"
        ></image>
        <view class="status-text">{{$t('user.blocked-tips')}}</view>
        <view class="status-tips"
          >{{$t('user.blocked-tips1')}}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import Blacklist from "./components/Blacklist.vue";
import {
  formatUserInfo
} from "@/utils/index";
import { blockUserList, unBindBlockUser} from '@/services/user'
import { mapState, mapMutations } from "vuex";
export default {
  components: { Blacklist },
  data() {
    return {
      options: [
        {
          text: "Unblock",
          style: {
            backgroundColor: "#FE6600",
            fontSize: "30rpx",
            fontWeight: 400,
          },
        },
      ],
      list: [],
      editShow: false,
      disabledEdit: false,
      startX: 0, //记录开始滑动位置
      moveX: 0, //计算滑动的距离，后面方便判断往那个方向滑动
      // defaultIdList: [], //需要回填通讯录的数据
      // 分页
      pageNum: 1,
      pageSize: 10
    };
  },
  computed: {
    ...mapState(["friendsList"]),
  },
  watch: {
    // 批量删除和单个删除不能同时存在
    editShow: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.list.forEach((element) => {
            element.disabled = true;
          });
        } else {
          this.list.forEach((element) => {
            element.disabled = false;
          });
        }
      },
    }
  },
  onShow () {
    this.refresh()
  },
  methods: {
    ...mapMutations(["SET_SELECT_FRIEND_OPTION"]),
    toPage() {
      this.SET_SELECT_FRIEND_OPTION({
        // 用户列表
        UserList: this.friendsList,
        // 默认选中用户id列表，即不可取消的用户id
        defaultIdList: this.list,
        type: 3,
        tipText: this.$t('setting.BlockWho'),
        title: this.$t('setting.BlockUser'),
        nextBtn: this.$t('Done'),
      });
      uni.navigateTo({
        url: "/pages/selectFriend/selectFriend",
      });
    },
    // 批量解除
    editUser() {
      if (this.disabledEdit) return;
      this.editShow = !this.editShow;
    },
    // 解除
    async rescindUser(item, index) {
      console.log('12312312')
      const resp = await unBindBlockUser(item.blockUserId)
      if (!resp.success) return
      this.refresh()
      uni.showToast({ title:this.$t('index.del-success'),icon: 'none',duration: 1500})
    },
    // 触摸中
    touchmove(pageX) {
      if (this.editShow) return;
      //this.moveX计算滑动的距离，后面方便判断往那个方向滑动
      this.moveX = pageX - this.startX;
    },
    // swiper粗发滑动结束事件
    touchend() {
      if (this.moveX < 0) {
        this.disabledEdit = true;
      } else {
        this.disabledEdit = false;
      }
    },
    // 开始触摸
    touchstart(startX) {
      if (this.editShow) return;
      this.startX = startX;
    },
    // 分页获取个人黑名单列表
    async getBlackList (pagiation) {
      const resp =  await blockUserList(pagiation)
      uni.stopPullDownRefresh()
      if (resp.success) {
        const list = resp.result.rows.map(item => {
          item = formatUserInfo(item)
          return item
        })
        console.log(list, '11111111111');
        this.total = resp.result.total
        this.list = this.pageNum == 1 ? list : this.list.concat(list)
      }
    },
    // 获取所有黑名单列表 
    getAllBlackList () {
      this.getBlackList()
    },
    // 刷新数据
    refresh () {
      this.list = []
      this.editShow =  false
      this.disabledEdit =  false
      this.getBlackList({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
      this.getAllBlackList()
    }
  },
  // 刷新黑名单列表
  onPullDownRefresh() {
    this.refresh()
  },
  // 加载分页数据
  onReachBottom () {
    if(this.total > this.pageNum * this.pageSize){
      this.pageNum++
      this.getBlackList({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.slot-right {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #61bdb2;
}
.content {
  .block-user-wrap {
    margin-bottom: 30rpx;
    padding: 0 50rpx;
    height: 120rpx;
    background: #ffffff;
    line-height: 120rpx;
    display: flex;
    align-items: center;
    .icon-heimingdan {
      color: #61bdb2;
      font-size: 24px;
      margin-right: 52rpx;
    }
    .block-user {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #61bdb2;
    }
  }
  .empty-wrap {
    padding: 0 80rpx;
    text-align: center;
    .disabled {
      width: 300rpx;
      height: 200rpx;
      padding-top: 220rpx;
    }
    .status-text {
      font-size: 34rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #000000;
      opacity: 0.8;
      padding-top: 100rpx;
    }
    .status-tips {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #878787;
      padding-top: 40rpx;
    }
  }
}
</style>